---
title: Using PostCSS
description: Installing Panda as a PostCSS plugin is the recommended way to integrate it with your project.
---

This guide shows you how to install Panda as a PostCSS plugin, which is the recommended way to integrate it with your
project.

<Steps>
### Install Panda

Install panda and create your `panda.config.ts` file.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm install -D @pandacss/dev postcss
    pnpm panda init -p
    ```
  </Tab>
  <Tab>
    ```bash
    npm install -D @pandacss/dev postcss
    npx panda init -p
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add -D @pandacss/dev postcss
    yarn panda init -p
    ```
  </Tab>
  <Tab>
    ```bash
    bun add -D @pandacss/dev postcss
    bun panda init -p
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Add Panda to your PostCSS config

Add panda to your `postcss.config.cjs` file, or wherever PostCSS is configured in your project.

```js
module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {}
  }
}
```

### Configure the content

Add your panda config to your `panda.config.js` file, or wherever panda is configured in your project.

```js {5}
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{ts,tsx,js,jsx}', './pages/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
  outdir: 'styled-system'
})
```

### Update package.json scripts

Open your `package.json` file and update the `scripts` section as follows:

```diff {3}
{
  "scripts": {
+    "prepare": "panda codegen",
  }
}
```

The `prepare` script will run codegen after dependency installation. Read more about
[codegen](/docs/references/cli#panda-codegen) in the CLI section.

> This step ensures that the panda output directory is regenerated after each dependency installation. So you can add
> the output directory to your `.gitignore` file and not worry about it.

### Configure the entry CSS with layers

Add this code to an `index.css` file which is going to be the root css of your project.

```css
@layer reset, base, tokens, recipes, utilities;
```

### Start your build process

Run your build process by feeding the [root css](#configure-the-entry-css-with-layers) to PostCSS in your preferred way.

<Tabs items={['CLI', 'JS API']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    postcss -o output.css index.css
    ```
  </Tab>
  <Tab>
    ```js
    const postcss = require("postcss");
    const fs = require("fs");

    fs.readFile("index.css", (err, css) => {
      postcss()
        .process(css, { from: "index.css", to: "output.css" })
        .then((result) => {
          console.log(result.css);
        });
    });
    ```

  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

> If you're using a framework, PostCSS is probably already integrated with your build process. Check our other guides or
> the documentation of your framework to see how to configure PostCSS.

### Start using Panda

Use the generated style utilities in your code and panda will extract them to the generated CSS file.

```jsx
import { css } from './styled-system/css'

export function App() {
  return <div className={css({ bg: 'red.400' })} />
}
```

  </Steps>

## Troubleshooting

If you're not getting import autocomplete in your IDE, you may need to include the `styled-system` directory in your
`tsconfig.json` file:

```json filename="tsconfig.json"
{
  // ...
  "include": ["src", "styled-system"]
}
```
